import React from "react";
import ColorPicker from "react-color"

import './registrate_right.css'
import { Popover, Button, Radio, Descriptions, Space, Drawer, Table, message, Card } from "antd";
import PubSub from "pubsub-js";
import axios from "axios";


const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    render: (text,record,index) => `${index+1}`
  },
  {
    title: '缩略图',
    dataIndex: 'complete_image',
    key: 'complete_image',
    render: (url) => <img height={85} src={url}/>
  },
  {
    title: '参考图像',
    dataIndex: 'fixed_image',
    key: 'fixed_image',
    render: (url) => <img height={85} src={url}/>
  },
  {
    title: '浮动图像',
    dataIndex: 'moving_image',
    key: 'moving_image',
    render: (url) => <img height={85} src={url}/>
  },
];


export default class Registrate_right extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        value: 1,
        original_image: '',
        point_image: '',
        outlines_image: '',
        complete_image: '',
        fixed_name:'',
        fixed_sex:'',
        fixed_age:'',
        fixed_doctor:'',
        fixed_stage:'',
        fixed_date:'',
        fixed_image_name:'',
        moving_name:'',
        moving_sex:'',
        moving_age:'',
        moving_doctor:'',
        moving_stage:'',
        moving_date:'',
        moving_image_name:'',
        flag: false,    // flag为false代表参考图像，true代表浮动图像
        visible: false,
        dataSource: [],
        total: 0,   // 图片总数
        pageNum: 1, // 当前页码
        pageSize: 6 // 每页显示数量
      }
    }

    componentDidMount(){
      PubSub.subscribe('sendFlagParam', (name, flag) => {
        this.setState({
          flag: flag
        })
      })
      PubSub.subscribe('sendRightImage', (name, record) => {
        this.setState({
          original_image: record.original_image,
          point_image: record.point_image,
          outlines_image: record.outlines_image,
          complete_image: record.complete_image,
        })
      })
      PubSub.subscribe('sendRegistrationParam', (name, record) => {
        if (record.stage === '治疗前（参考图像）') {
          this.setState({
            fixed_name: record.p_name,
            fixed_sex: record.p_sex,
            fixed_age: record.p_age,
            fixed_doctor: record.doctor,
            fixed_stage: record.stage,
            fixed_date: record.date,
            fixed_image_name: record.image_name,
          })
        } else if (record.stage === '治疗后（浮动图像）') {
          this.setState({
            moving_name: record.p_name,
            moving_sex: record.p_sex,
            moving_age: record.p_age,
            moving_doctor: record.doctor,
            moving_stage: record.stage,
            moving_date: record.date,
            moving_image_name: record.image_name,
          })
        }

      })
    }

    onChange = e => {
      console.log('radio checked', e.target.value);
      // 将单选框选择的图像传递给中间部分
      switch (e.target.value) {
        case 1:
          PubSub.publish("sendAnotherFourImage", this.state.original_image);
          break;
        case 2:
          PubSub.publish("sendAnotherFourImage", this.state.point_image);
          break;
        case 3:
          PubSub.publish("sendAnotherFourImage", this.state.outlines_image);
          break;
        case 4:
          PubSub.publish("sendAnotherFourImage", this.state.complete_image);
          break;
      }
      this.setState({
        value: e.target.value,
      });
    };

    showDrawer = () => {
      this.setState({
        visible: true
      })
      let data = { pageNum: this.state.pageNum }
      let url = '/registrationapi/queryhasregistrateimage'
      axios.post(url, data, {headers: {'Content-Type': 'application/json'}}
        ).then(res=>{
          if(res.status === 200 && res.data.code === 0){
            this.setState({
              dataSource:res.data.has_registrate_image_list,
              total:res.data.total,
            })
          } else{
            console.log(res.data.msg)
            message.error(res.data.msg)
          }
      })
    }

    onClose = () => {
      this.setState({
        visible: false
      })
    }

    // 点击页码的回调函数
    changePage(current){
      let data = { pageNum: current }
      let url = '/registrationapi/queryhasregistrateimage'
      axios.post(url, data, {headers: {'Content-Type': 'application/json'}}
        ).then(res=>{
          if(res.status === 200 && res.data.code === 0){
            this.setState({
              dataSource:res.data.has_registrate_image_list,
              total:res.data.total,
            })
          } else{
            console.log(res.data.msg)
            message.error(res.data.msg)
          }
      })
    }

    // 设置行的类函数
    rowClassNameFun = (record, index) => {
        if (index === this.state.index)
            return 'mySelfClassName'
    }

    // 更新点击的行数以及图像地址
    updateRow = (record, index) => {
      let data = { fixed_image: record.fixed_image, moving_image: record.moving_image }
      let url = '/registrationapi/queryfixedandmoving'
      axios.post(url, data, {headers: {'Content-Type': 'application/json'}}
        ).then(res=>{
          if(res.status === 200 && res.data.code === 0){
            this.setState({
              fixed_name: res.data.fixed_image.p_name,
              fixed_sex: res.data.fixed_image.p_sex,
              fixed_age: res.data.fixed_image.p_age,
              fixed_doctor: res.data.fixed_image.doctor,
              fixed_stage: res.data.fixed_image.stage,
              fixed_date: res.data.fixed_image.date,
              fixed_image_name: res.data.fixed_image.image_name,
              moving_name: res.data.moving_image.p_name,
              moving_sex: res.data.moving_image.p_sex,
              moving_age: res.data.moving_image.p_age,
              moving_doctor: res.data.moving_image.doctor,
              moving_stage: res.data.moving_image.stage,
              moving_date: res.data.moving_image.date,
              moving_image_name: res.data.moving_image.image_name,
              original_image: record.original_image,
              point_image: record.point_image,
              outlines_image: record.outlines_image,
              complete_image: record.complete_image,
              visible: false,
              value: 1,
            })
            PubSub.publish("sendLeftImage", res.data);
          } else{
            console.log(res.data.msg)
            message.error(res.data.msg)
          }
      })
      PubSub.publish("sendHomeImage", record.original_image);
    }

    render() {
        // 分页参数
        const paginationProps = {
          showSizeChanger: false,//设置每页显示数据条数
          showQuickJumper: false,
          position: ['bottomCenter'],
          showTotal: () => `共${this.state.total}条`,
          pageSize: this.state.pageSize,
          total: this.state.total,  //数据的总的条数
          onChange: (current) => this.changePage(current), //点击当前页码
        }
        return (
          <div className="registrate_right">
            <div className="registrate_top">
              <Descriptions bordered column={1} title="相关信息">
                <Descriptions.Item label="姓名">{this.state.flag === true ? this.state.moving_name : this.state.fixed_name}</Descriptions.Item>
                <Descriptions.Item label="性别">{this.state.flag === true ? this.state.moving_sex : this.state.fixed_sex}</Descriptions.Item>
                <Descriptions.Item label="年龄">{this.state.flag === true ? this.state.moving_age : this.state.fixed_age}</Descriptions.Item>
                <Descriptions.Item label="主治医生">{this.state.flag === true ? this.state.moving_doctor : this.state.fixed_doctor}</Descriptions.Item>
                <Descriptions.Item label="诊疗阶段">{this.state.flag === true ? this.state.moving_stage : this.state.fixed_stage}</Descriptions.Item>
                <Descriptions.Item label="拍摄时间">{this.state.flag === true ? this.state.moving_date : this.state.fixed_date}</Descriptions.Item>
                <Descriptions.Item label="图片名称">{this.state.flag === true ? this.state.moving_image_name : this.state.fixed_image_name}</Descriptions.Item>
              </Descriptions>
            </div>
            <div className="registrate_bottom">
              <Card style={{ width: 270, marginLeft: 20, background: '#141316' }}>
                <Radio.Group onChange={this.onChange} value={this.state.value}>
                  <Space direction="vertical">
                    <Radio value={1} disabled={this.state.original_image === ''}>原始配准图像</Radio>
                    <Radio value={2} disabled={this.state.point_image === ''}>显示带特征点配准图像</Radio>
                    <Radio value={3} disabled={this.state.outlines_image === ''}>显示带轮廓配准图像</Radio>
                    <Radio value={4} disabled={this.state.complete_image === ''}>显示完整配准图像</Radio>
                  </Space>
                </Radio.Group>
              </Card>
              <div className="registrate_bottom_button">
                <Card style={{ width: 270, marginLeft: 20, marginTop: 10, background: '#141316' }}>
                  <Popover content={<ColorPicker />}>
                    <Button size={'large'} style={{ marginLeft: 32 }} >选择参考图像颜色</Button>
                  </Popover>
                  <Popover content={<ColorPicker />}>
                    <Button size={'large'} style={{ marginLeft: 32 }} >选择浮动图像颜色</Button>
                  </Popover>
                </Card>
              </div>
              <Button type="primary" size={'large'} onClick={this.showDrawer} style={{ marginTop: 15, width: 300 }}>打开已配准列表</Button>
              <Drawer title="已经完成配准的图像" placement="right" width={450} onClose={this.onClose} visible={this.state.visible}>
                <Table
                  dataSource={this.state.dataSource}
                  columns={columns}
                  pagination={ paginationProps }
                  rowClassName={this.rowClassNameFun}
                  onRow={ (record, index) => {
                    return {
                      onClick: event => { this.updateRow(record, index) }, // 点击行
                    };
                  }}
                />
              </Drawer>
            </div>
          </div>
        )
    }
}